<template>
  <!-- 指数对比树选择框 -->
  <div style="display: inline-block">
    <el-cascader
      :ref="refName"
      v-if="hasDis"
      collapse-tags
      :style="`width: ${width}px;`"
      class="my_el-cascader"
      :show-all-levels="false"
      :size="size"
      v-model="value"
      :options="contrastOptions"
      :props="{
        multiple: multiple,
        emitPath: false,
      }"
      :key="cascaderKey"
      @change="getIndexName"
      filterable
      @visible-change="commonlyHandle"
    ></el-cascader>
  </div>
</template>

<script>
import { queryAllIndexType } from "@/api/policyManage";

export default {
  props: {
    indexType: {
      type: Array | String,
      default: () => {
        return [];
      },
    },
    maxNum: {
      type: Number,
      default: 280,
    },
    width: {
      type: Number,
      default: 280,
    },
    multiple: {
      type: Boolean,
      default: true,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    realIntoBeyondIncome_name: {
      type: String,
      default: "",
    },
    contrastData: {
      type: Array | Object,
    },
    refName: {
      type: String,
      default: "cascader",
    },
    size: {
      type: String,
      default: "",
    },
    contrastBeyondIncome1: {
      type: String | Number,
      default: "",
    },
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        console.log(newVal instanceof Array);
        if (newVal instanceof Array && newVal.length > this.maxNum) {
          setTimeout(() => {
            this.value = oldVal;
          }, 200);
        }
      },
    },
    // indexType: {
    //   handler(newVal, oldVal) {
    //     if (oldVal === "" || oldVal.length === 0) {
    //       this.$nextTick(() => {
    //         this.value = this.indexType;
    //       });
    //     }
    //   },
    // },
    realIntoBeyondIncome_name: {
      handler(name) {
        const tag = this.contrastOptions.findIndex((item) => item.id == -1000);
        if (tag != -1) this.contrastOptions.splice(tag, 1);
        if (name) {
          this.contrastOptions.push({
            id: -1000, // 特指实盘
            typeName: "实盘",
            lists: [
              {
                id: -1,
                typeName: name,
              },
            ],
          });
        } else {
          ++this.cascaderKey;
        }
      },
    },
    contrastData: {
      handler(data) {
        this.contrastDataHnadle(data);
      },
      deep: true,
    },
    contrastBeyondIncome1() {
      this.contrastDataHnadle(this.contrastData);
    },
  },
  data() {
    return {
      hasDis: true,
      value: [],
      cascaderKey: 1,
      contrastOptions: [],
      contrastOptions_obj: [],
    };
  },
  created() {
    this.value = this.indexType;
    this.queryAllIndexType();
  },
  activated() {},
  destroyed() {
    // console.log("销毁了");
  },
  methods: {
    getIndexName(id) {
      this.commonlyHandle();
      const arr = [];
      let strId = id;
      if (typeof id === "object") {
        id.map((item) => {
          if (typeof item === "string" && item.indexOf("_") !== -1) {
            arr.push(+item.split("_")[1]);
          } else {
            arr.push(item);
          }
        });
        id = arr;
        this.$emit("update:indexType", arr);
      } else if (typeof id === "string" && id.indexOf("_") !== -1) {
        strId = +id.split("_")[1];
        this.$emit("update:indexType", strId);
      } else {
        this.$emit("update:indexType", id);
      }
      this.$emit("getIndexName", this.contrastOptions_obj[id]);
    },
    // 常用指数更新
    commonlyHandle(event) {
      if (event === false) {
        this.hasDis = event;
        this.$nextTick(() => {
          this.hasDis = true;
        });
      }
      const nodesInfoArr = this.$refs[this.refName].getCheckedNodes();
      // 1.重置所有 选项 disabled 为false
      this.contrastOptions.map((item) => {
        item.children.map((citem) => {
          citem.disabled = false;
        });
      });
      // 2.根据选中node节点 重复的指数节点disabled 为 true
      nodesInfoArr.map((item) => {
        if (!item.parent) {
          return;
        }
        // 3.如果是常用指数，则除常用指数外全部选项遍历 重复的选项disabled为true
        if (item.parent.value === "_") {
          this.contrastOptions.map((pitem) => {
            pitem.children.map((citem) => {
              if (citem.id === Number(item.value.split("_")[1])) {
                citem.disabled = true;
              }
            });
          });
        } else {
          // 4.如果不是常用指数则遍历常用指数重复的选项disabled为true
          this.contrastOptions[0].children.map((citem) => {
            if (citem.id === "_" + item.value) {
              citem.disabled = true;
            }
          });
        }
      });
    },
    // 对比指标 选择树
    queryAllIndexType() {
      queryAllIndexType().then((res) => {
        // console.log(res);
        const contrastOptions_obj = {};
        res.body.forEach((items, i) => {
          items.id = items.id + 9999; // 解决父级和子级同id问题
          res.body[i].typeName = items.modelName;
          items.lists.forEach((item) => {
            contrastOptions_obj[item.id] = item.typeName;
          });
          this.contrastOptions_obj = contrastOptions_obj;
        });

        this.$emit("contrastOptionsObj", contrastOptions_obj);
        const commonIndexArr = [];
        this.contrastOptions = [];
        res.body.map((item) => {
          const lists = {
            deleteFlag: item.deleteFlag,
            id: item.id,
            value: item.id,
            children: [],
            modelName: item.modelName,
            label: item.typeName,
          };
          item.lists.map((citem) => {
            lists.children.push({
              deleteFlag: citem.deleteFlag,
              id: citem.id,
              value: citem.id,
              modelName: citem.modelName,
              label: citem.typeName,
            });
            // 添加常用指数
            if (citem.commonIndex === 1) {
              commonIndexArr.push({
                deleteFlag: citem.deleteFlag,
                id: "_" + citem.id,
                value: "_" + citem.id,
                modelName: citem.modelName,
                label: citem.typeName,
              });
            }
          });
          this.contrastOptions.push(lists);
        });
        this.contrastOptions.unshift({
          deleteFlag: 1,
          id: "_",
          value: "_",
          children: commonIndexArr,
          modelName: "常用指数",
          label: "常用指数",
        });
        setTimeout(() => {
          this.value = this.indexType;
        }, 200);
      });
    },

    // 对比更新超额数据
    contrastDataHnadle(data) {
      let data_list = data;
      if (data_list[0].name == "模拟组合") {
        data_list = data.slice(1, data.length);
      }
      const tag = this.contrastOptions.findIndex((item) => item.id == -2000);
      if (tag != -1) this.contrastOptions.splice(tag, 1);
      if (data_list) {
        const lists = [
          {
            id: "mnzh",
            typeName: "模拟组合",
            disabled: this.contrastBeyondIncome1 == "mnzh",
          },
        ];
        data_list.forEach((item, i) => {
          lists.push({
            id: item.gId,
            typeName: item.name,
            disabled: this.contrastBeyondIncome1 == item.gId,
          });
        });
        this.contrastOptions.unshift({
          id: -2000, // 特指实盘
          typeName: "已选对比产品",
          lists,
        });
      } else {
        ++this.cascaderKey;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.my_el-cascader {
  ::v-deep .el-input--suffix {
    // input::-webkit-input-placeholder {
    //   /* WebKit browsers 适配谷歌 */
    //   color: transparent;
    // }
    // input:-moz-placeholder {
    //   /* Mozilla Firefox 4 to 18 适配火狐 */
    //   color: transparent;
    // }
    // input::-moz-placeholder {
    //   /* Mozilla Firefox 19+ 适配火狐 */
    //   color: transparent;
    // }
    // input:-ms-input-placeholder {
    //   /* Internet Explorer 10+  适配ie*/
    //   color: transparent;
    // }
  }
}
</style>
